<template>
  <div class="p-call table-box">
    <ProTable
      ref="proTable"
      title="callList"
      :columns="columns"
      :request-api="getTableList"
      :init-param="initParam"
      :data-callback="dataCallback"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader="">
        <el-button type="primary" icon="CirclePlus" @click="handleAddCall()"> 添加 </el-button>
      </template>

      <template #ai_name="scope">
        {{ scope.row.ai_name }}
      </template>

      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button type="primary" link @click="handleEditCall(scope.row)"> 编辑 </el-button>
        <el-popconfirm title="确定要删除?" @confirm="handleRemoveCall(scope.row)">
          <template #reference>
            <el-button type="danger" link> 删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </ProTable>
  </div>

  <!-- 编辑抽屉 -->
  <CallEditDrawer ref="drawerRef" />

  <!-- 图片预览 -->
  <PreviewImage ref="previewRef" />
</template>

<script setup lang="tsx" name="call">
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { useRoute, useRouter } from "vue-router";
import { getPicList } from "@/api/gallery";
import { getCallList, createCall, updateCall, deleteCall } from "@/api/user/call";
import { ref, reactive } from "vue";
import PreviewImage from "@/views/proTable/components/PreviewImage.vue";
import { deepClone } from "@/utils/index";
import CallEditDrawer from "./CallEditDrawer.vue";

const router = useRouter();
const route = useRoute();

// 0:ios(web) 1:android 2:web大尺度 3:web
let ai_platform = 0;
if (route.name === "call2") {
  ai_platform = 1;
} else if (route.name === "call3") {
  ai_platform = 2;
} else if (route.name === "call4") {
  ai_platform = 3;
}

const proTable = ref<ProTableInstance>();
const initParam = reactive({});
const getTableList = async (option: any) => {
  const params: any = {
    page: option.page,
    pageSize: option.pageSize,
    ai_uid: option.ai_name,
    ai_platform
  };
  return getCallList(params);
};
const previewRef = ref<InstanceType<typeof PreviewImage> | null>(null);
const showImages = (row: any, index: number) => {
  const params = {
    index: index,
    row: row
  };
  previewRef.value?.previewParams(params);
};

const columns: ColumnProps[] = [
  {
    prop: "ai_name",
    label: "AI昵称",
    width: "120"
  },
  {
    prop: "ai_avatar",
    label: "头像",
    render: scope => {
      return (
        <el-image
          style="z-index:100;width:80px;height:80px;cursor: pointer;"
          src={scope.row.ai_avatar}
          onClick={() => showImages(scope.row.ai_avatar, 0)}
        />
      );
    },
    width: "100"
  },
  {
    prop: "call_cover_url",
    label: "语音电话封面",
    render: scope => {
      return scope.row.call_cover_url ? (
        <el-image
          style="z-index:100;width:100px;height:100px;cursor: pointer;"
          src={scope.row.call_cover_url}
          onClick={() => showImages(scope.row.call_cover_url, 0)}
        />
      ) : (
        "无"
      );
    },
    width: "150"
  },
  {
    prop: "call_video_url",
    label: "语音电话视频封面",
    render: scope => {
      return scope.row.call_video_url ? "有" : "无";
    },
    width: "150"
  },
  {
    prop: "call_description",
    label: "语音电话描述",
    render: scope => scope.row.call_description || "无",
    width: 150
  },
  {
    prop: "call_bgm_url",
    label: "语音电话铃声",
    render: scope => (scope.row.call_description ? "有" : "无"),
    width: 150
  },
  {
    prop: "call_weight",
    label: "权重"
  },
  {
    prop: "operation",
    label: "操作",
    fixed: "right",
    width: "170"
  }
];

const dataCallback = (data: any) => {
  return {
    list: data.list,
    total: data.total,
    page: data.page,
    pageSize: data.pageSize
  };
};

const drawerRef = ref<InstanceType<typeof CallEditDrawer> | null>(null);

const handleAddCall = () => {
  const params = {
    row: {},
    isView: false,
    api: createCall,
    getTableList: proTable.value?.getTableList
  };
  drawerRef.value?.acceptParams(params);
};
const handleEditCall = (row: any) => {
  const params = {
    isView: false,
    row: { ...row },
    api: updateCall,
    getTableList: proTable.value?.getTableList
  };
  const _params = deepClone(params); // 断一下引用
  _params.api = updateCall;
  _params.getTableList = proTable.value?.getTableList;
  drawerRef.value?.acceptParams(_params);
};
const handleRemoveCall = async (row: any) => {
  await deleteCall({ id: row.id, ai_platform });
  proTable.value?.getTableList();
};
</script>

<style lang="scss" scoped>
.p-call {
  ::v-deep img {
    object-fit: contain;
  }
}
</style>
